<template>
	<view class="rui-title">
		<view class="title">{{title}}
		</view>
		<view class="tips" v-if="tips">{{tips}}</view>
		<view class="more" v-if="more" @click="change">{{more}}</view>
	</view>
</template>
<script setup>
	defineProps({
		title: String,
		tips: {
			type: String,
			default: ""
		},
		more: {
			type: String,
			default: ""
		}
	})
	
	const emits = defineEmits(['change'])
	const change = () => {
		emits('change')
	}
</script>
<style lang="scss" scoped>
	.rui-title {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 10rpx 20rpx;

		.title {
			font-size: 38rpx;
			font-weight: bold;
			font-family: Times New Roman, Times, serif;
			color: #333;
		}
		.more{
			color: #999;
			font-size: 24rpx;
		}
		.tips {
			color: var(--color);
			font-size: 24rpx;
			background: #dcedff;
			padding: 5rpx 20rpx;
			border-radius: 30rpx;
		}
	}
</style>